<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" href='<spring:url value="/resources/css/jquery-ui-1.10.4.custom.css"></spring:url>'/>
    <link rel="stylesheet" href='<spring:url value="/resources/css/validationEngine.jquery.css"></spring:url>'/>
    <link rel="stylesheet" href='<spring:url value="/resources/css/template.css"></spring:url>'/>
    <link rel="stylesheet" href='<spring:url value="/resources/css/top.css"></spring:url>' type="text/css"/>
    <link rel="stylesheet" href='<spring:url value="/resources/css/middle.css"></spring:url>'>
    <link rel="stylesheet" href='<spring:url value="/resources/css/bottom.css"></spring:url>' type="text/css"/>
    <script src='<spring:url value="/resources/js/jquery-1.11.0.js"></spring:url>'></script>
    <script src='<spring:url value="/resources/js/jquery-ui-1.10.4.custom.js" ></spring:url>'></script>
    <script src='<spring:url value="/resources/js/jquery.validationEngine-zh_CN.js" ></spring:url>'></script>
    <script src='<spring:url value="/resources/js/jquery.validationEngine.js" ></spring:url>'></script>
    <script src='<spring:url value="/resources/js/jquery.lazyload.js"></spring:url>'></script>
    <script src='<spring:url value="/resources/js/common.js" ></spring:url>'></script>
    <script type="text/javascript">
        $(function () {
            var height = $(window).height();
            $("#div").css("height", height + "px");
            $("#div_1").css("height", (height - 40) + "px");
            $("#boardroomImg").attr("src", $("#boardroomImgUrl").val());
            $("img.lazy").lazyload();
            $("#staffer").each(function () {
                $(this).find("div").draggable();
            });
        });

        function gotoConfirmInfo() {
            var val = "";
            for (var i = 0; i < $("#staffer").find("table").find("td").length; i++) {
                for (var j = 0; j < $("#staffer").find("table").find("tr").eq(i).find("td").length; j++) {
                    id = $("#staffer").find("table").find("tr").eq(i).find("td").eq(j).find("div").attr("id");
                    name = $("#staffer").find("table").find("tr").eq(i).find("td").eq(j).find("div").find("p").text();
                    x = $("#staffer").find("table").find("tr").eq(i).find("td").eq(j).find("div").offset().left - $("#boardroomImg").offset().left;
                    y = $("#staffer").find("table").find("tr").eq(i).find("td").eq(j).find("div").offset().top - $("#boardroomImg").offset().top;
                    if ((x >= 0 && x <= 600) && (y >= 0 && y <= 350)) {
                        val += id + ":" + name + ":" + x + ":" + y + ",";
                    }
                }
            }
            $("#seatPosition").val(val);
            $("#frmSeatInfo").attr("action", "/foc/user/conferencebook/gotoConfirmInfo");
            $("#frmSeatInfo").submit();
        }
    </script>
</head>
<body>
<DIV id="div" style="background-color:#ededed;" align="center">
    <div id="div_1">
        <div class="logo_css">
            <div class="img_css">
                <img src='<spring:url value="/resources/images/admin/logo.png"></spring:url>' border="0"/>
            </div>
            <div class="time_css">
                <div class="time_css_td1">
                    <table align="right">
                        <tr>
                            <td class="time_css_td2">${userVO.userRole.roleName}: ${userVO.userName}</td>
                            <!-- <td></td> 		<td></td> 		<td></td> -->
                            <td>
                                <form:form id="frm" action="" method="post">
                                    <a class="font_quit" href="#"
                                       onclick="submitFrm('#frm','/foc/user/conferencebook/logout')">退出系统</a>
                                </form:form>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div>
            <table align="center">
                <tr>
                    <td><img src='<spring:url value="/resources/images/user/yuding_1_1.png" ></spring:url>' border="0"/>&nbsp;
                    </td>
                    <td><img src='<spring:url value="/resources/images/user/yuding_2_1.png" ></spring:url>' border="0"/>&nbsp;
                    </td>
                    <td><img src='<spring:url value="/resources/images/user/yuding_3.png" ></spring:url>' border="0"/>&nbsp;
                    </td>
                    <td><img src='<spring:url value="/resources/images/user/yuding_4_1.png" ></spring:url>' border="0"/>
                    </td>
                </tr>
            </table>
        </div>
        <form id="frmSeatInfo" method="post">
            <div class="step_div" align="center">
                <div id="staffer" class="step_div_staffer">
                    <input id="seatPosition" name="seatPosition" type="hidden" value=""/>
                    <table>
                        <c:forEach var="seatPositionStaffer" items="${staffer}">
                            <tr>
                                <c:forEach var="sps" items="${seatPositionStaffer}">
                                    <td style="padding-left:20px;">
                                        <div id="${sps.id}">
                                            <p>${sps.stafferName}</p>
                                        </div>
                                    </td>
                                </c:forEach>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
                <div>
                    <input id="boardroomImgUrl" type="hidden" value="${boardroom.image2}"/>
                    <img id="boardroomImg" class="lazy" src="" width="600" height="350"/>
                </div>
            </div>
        </form>
        <hr/>
        <div align="center" style="margin-top:20px; margin-bottom: 10px">
            <a href="#" name="btnBack"
               onclick="submitFrm('#frmSeatInfo','/foc/user/conferencebook/gotoAdditionalInfo')"><img
                    src='<spring:url value="/resources/images/user/last.png" ></spring:url>' border="0"/></a>
            <a href="#" name="btnNext" onclick="gotoConfirmInfo()"><img
                    src='<spring:url value="/resources/images/user/next.png" ></spring:url>' border="0"/></a>
        </div>
    </div>
    <div id="bottom">
        <table cellpadding="0" cellspacing="0" align="center" bgcolor="#094782" width="100%">
            <tr>
                <td align="center"><img src='<spring:url value="/resources/images/bottom/bottom_logo.png"></spring:url>'
                                        border="0"/></td>
            </tr>
        </table>
    </div>
</DIV>
</body>
</html>